<template>
  <div class="check_detail">
    <head-top head-title="详情" go-back="true"></head-top>
    <div class="detail_main">
      <div class="check_top">
        <!--未修改布局-->
        <!--<div class="help_title">
          <img
            :src="details.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
            alt="">
          <div class="help_msg">
            <div class="msg_top">
              <p>{{details.real_name}}</p>
              <p>
                <span class="phone-image"></span>
                <a :href="'tel:'+details.phone">
                  <span ref="phone">{{details.phone}}</span>
                </a>
              </p>
            </div>
            <div class="msg_bottom">
              <p>时间：{{details.created_at*1000 | dateFmt('YYYY-MM-DD')}}</p>
              &lt;!&ndash; <a v-show="status===1" type="button" @click="$router.push('/CheckPublish')"><span>编辑</span></a> &ndash;&gt;
            </div>
          </div>
        </div>-->
        <div class="help_title2">
          <img
            :src="details.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
            alt="">
          <span>时间：{{details.created_at*1000 | dateFmt('YYYY-MM-DD')}}</span>
        </div>
      </div>
      <div class="msg_cross">
        <p>项目名称：{{details.project_name}}</p>
        <p v-show="details.lift_num!=='0'">电梯编号：{{details.lift_num}}</p>
        <p v-show="details.fang_hao!=='' && details.fang_hao !== null">房号：{{details.fang_hao}}</p>
      </div>
      <div class="check_all">
        <ul>
          <li v-for="(list,index) in details.data">
            <h3>{{list.category_name}}</h3>
            <a v-show="list.img">
              <des-image :list="list.img"></des-image>
            </a>
            <p class="border-bottom" v-if="list.resolvent"><span>问题描述：</span>{{list.resolvent}}</p>
            <p class="border-bottom" v-if="list.resolvent===''"><span>问题描述：</span>暂无问题描述</p>
          </li>
        </ul>
      </div>
      <div class="check_summary" v-show="details.summary!==''">
        <h3 v-show="details.summary!==''">监理评估汇总：</h3>
        <div class="p_box">
          <p>
            {{details.summary}}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .check_detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .detail_main {
      .check_top {
        width: 100%;
        .help_title {
          width: 100%;
          height: 65px;
          background: red;
          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
          }
          .help_msg {
            float: right;
            width: 83%;
            height: 65px;
            .msg_top {
              width: 100%;
              height: 33px;
              p:first-child {
                float: left;
                font-size: 15px;
                line-height: 33px;
              }
              p:last-child {
                float: right;
                margin-right: 10px;
                .phone-image {
                  display: inline-block;
                  width: 15px;
                  height: 15px;
                  background-size: 15px 15px;
                  background-repeat: no-repeat;
                  @include bgimg('../home/images/dianhua');
                  vertical-align: middle;
                  float: left;
                  margin-top: 9px;
                }
                span {
                  font-size: 13px;
                  float: right;
                  line-height: 33px;
                  color: #808080;
                }
              }
            }
            .msg_bottom {
              width: 100%;
              height: 32px;
              p {
                clear: both;
                float: left;
                line-height: 25px;
                font-size: 13px;
                color: #808080;
              }
              a {
                float: right;
                margin-right: 10px;
                border: 1px solid #0078de;
                border-radius: 5px;
                background: #fff;
                padding: 5px 15px 5px 15px;
                outline: none;
                span {
                  color: #0078de;
                  font-size: 13px;
                }
              }
            }
          }
        }
        .help_title2 {
          width: 100%;
          height: 65px;
          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
          }
          span{
            font-size: 13px;
            line-height: 65px;
            margin-left: 10px;
            color: #808080;
          }
        }
      }
      .msg_cross {
        width: 100%;
        height: 30px;
        background: #e4e4e4;
        font-size: 12px;
        color: #666;
        line-height: 30px;
        p:first-child {
          float: left;
          padding-left: 10px;
        }
        p:last-child {
          float: right;
          padding-right: 10px;
        }
      }
      .check_all {
        ul {
          li {
            padding: 10px;
            border-bottom: 5px solid #f2f2f2;
            h3 {
              font-size: 15px;
              font-weight: normal;
            }
            p {
              padding: 10px 0;
              font-size: 13px;
              color: #656565;
            }
          }
        }
      }
      .check_summary {
        padding: 0 10px;
        h3 {
          font-size: 15px;
          color: #000;
          font-weight: normal;
          padding-top: 10px;
        }
        .p_box {
          background: #f2f2f2;
          margin-top: 10px;
          border-radius: 5px;
          padding: 0 0 0 10px;
          margin-bottom: 10px;
          p {
            // text-indent: 2em;
            font-size: 14px;
            line-height: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #666;
          }
        }
      }
    }

  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import desImage from '../common/desImge.vue'
  import { getCheckList } from '../../api/supervise.js'

  export default {
    name: 'CheckDetail',
    data () {
      return {
        details: {}
      }
    },
    created () {
      this._getCheckDetail()
    },
    methods: {
      _getCheckDetail () {
        getCheckList(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.details = res.data.data
            // console.log(this.details)
          }
        })
      }
    },
    components: {
      headTop,
      desImage
    }
  }
</script>
